<template>
    <div>
        <van-nav-bar title="我的信息" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-field label="Id" :value="user.userId" readonly />
        <van-field label="创建时间" :value="user.creationTime" readonly />
        <van-field label="登录名" :value="user.loginName" readonly />
        <van-field v-model="user.password" label="修改密码" />
        <van-field v-model="user.name" label="昵称" />
        <van-field v-model="user.phone" type="tel" label="手机号" />
        <van-field v-model="user.email" label="邮箱" />
        <van-field v-model="user.userAddress" label="收货地址" />
        <van-field label="最后修改时间" :value="user.updateTime" readonly />
        <van-button round block type="info" @click="onSubmit">
            提交修改
        </van-button>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'editorElem',
    data() {
        return {
            editorContent: '',
            user: {}
        }
    },
    //props: ['catchData'],    //接收父组件的方法
    mounted() {
        //   window.console.log("你进入了正文页")
        //   window.console.log("参数为" + this.$route.query.id)
        this.getData()
    },
    methods: {
        onClickLeft() {
            // Toast('返回');
            this.$router.go(-1);//返回上一层
        },
        async onSubmit() {
            let data = this.user
            data.updateBy = null
            data.founder = null
            data.creationTime = null
            data.updateTime = null
            let res = await this.$http.editMyUser(data)
            if (res !== undefined && res.meta.status == 200) {
                Toast('修改成功');
                this.getData()
            }
        },
        async getData() {
            let res = await this.$http.getMyUser()
            this.user = res.data
        },
    },
    // 当页面进入时
    beforeRouteEnter(to, from, next) {
        //   window.console.log("你进入了正文页"); // undefined
        //    window.console.log(this); //undefined，不能用this来获取vue实例
        //  window.console.log('组件路由钩子：beforeRouteEnter');
        next(vm => {
            vm
            //    window.console.log(vm); //vm为vue的实例
            //    window.console.log("参数为" + vm.$route.query.id)
            //     vm.getData()
            //    window.console.log('组件路由钩子beforeRouteEnter的next');
        });
    },
    // 当页面离开时
    // 这里思路是制作为用户阅读时间
    beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        window.console.log(this, 'beforeRouteLeave'); //当前组件实例
        window.console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
        window.console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
        window.console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
        next();
    }

}




</script>

<style >

</style>